import React, { useEffect, useState } from 'react'
import { Tabs, InfiniteScroll, Image, PullToRefresh } from 'antd-mobile'
import { getList } from "../../../api"
import { sleep } from 'antd-mobile/es/utils/sleep'
import { connect } from 'react-redux'
import actions from "../../../store/actions"
import "./style.scss"
function Index(props:any) {
    const {list,dispatch}=props
    // const [list, setList]: any = useState([])
    const [keys, setKeys] = useState('0')
    const [page, setPage] = useState(1)
    const [flag, setFlag] = useState(true)
    const [hasMore, setHasMore] = useState(true)

    const tabs = [
        '关注',
        "推荐",
        "热榜",
        "头条精选",
        "后端",
        "web前端"
    ]
    const getAndSet = async () => {
        const resp: any = await getList({ keys: keys, page: page })
        const action=actions.getList(resp.data.data)
        dispatch(action)
        if (resp.data.total === resp.data.data?.length) {
            setHasMore(false)
        }
        setFlag(true)
    }
    const loadMore = async () => {
        if (flag) {
            setFlag(false)
            await setPage(page + 1)
            await getAndSet()
        }
    }
    useEffect(() => {
        getAndSet()
    }, [keys])
    const changeKey = (key: any) => {
        setKeys(key)
    }
    // 7、正确实现首页页面、登录页面的基础布局 10：12
//     8、正确实现首页列表的渲染功能及加载更多（原生js实现）  10：12
// 9、考虑数据加载失败或者暂无数据的边界情况 10：12
// 10、考虑长列表的性能优化（如：仅渲染视口可见的数据） 10：12

    return (
        <div>
            <div className="title">
                <Tabs defaultActiveKey={keys} onChange={(key) => changeKey(key)}>
                    {
                        tabs.map((v, i) => {
                            return (
                                <Tabs.Tab title={v} key={i}>
                                </Tabs.Tab>
                            )
                        })
                    }
                </Tabs>
            </div>
            <div className="listWrap">
                <PullToRefresh
                    onRefresh={async () => {
                        await sleep(1000)
                        window.location.reload()
                    }}
                >
                    {
                        list && list.length && list.map((v: any, i: any) => {
                            return (
                                <dl key={i}>
                                    <dd>
                                        <h4>{v.title}</h4>
                                        <p>{v.desc}</p>
                                        <p>{v.admin}</p>
                                    </dd>
                                    <dt><Image lazy src={v.img} alt="" /></dt>
                                    {/* 23、考虑标签页面图片过多时，性能优化（如：图片懒加载） 10：15 */}
                                </dl>
                            )
                        })
                    }
                    {
                        list && list.length && <InfiniteScroll loadMore={() => loadMore()} hasMore={hasMore} />
                    }
                </PullToRefresh>

            </div>
        </div>
    )
}
const mapStateToProps = (state:any) => {
    return{
        ...state
    }
}

const mapDispatchToProps =(dispatch:any)=> {
    return{
        dispatch
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)


